<template>
  <v-app>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
    
    <!-- 底部导航栏 -->
    <nav class="bottom-nav" v-if="showNav">
      <router-link to="/" class="nav-item" active-class="active">
        <img src="/imgs/tab_home.png" alt="首页">
        <span>首页</span>
      </router-link>
      <router-link to="/category" class="nav-item" active-class="active">
        <img src="/imgs/tab_category.png" alt="分类">
        <span>分类</span>
      </router-link>
      <router-link to="/app" class="nav-item" active-class="active">
        <img src="/imgs/tab_app.png" alt="APP">
        <span>APP</span>
      </router-link>
      <router-link to="/mine" class="nav-item" active-class="active">
        <img src="/imgs/tab_mine.png" alt="我的">
        <span>我的</span>
      </router-link>
    </nav>
  </v-app>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const showNav = computed(() => route.path === '/' || route.path === '/category' || route.path === '/app' || route.path === '/mine')
</script>

<style>
/* 全局样式 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
  background-color: #f7f7f7;
  padding-bottom: 60px; /* 为底部导航栏留出空间 */
}

.v-application {
  max-width: 1200px;
  margin: 0 auto;
}

/* 底部导航栏样式 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #666;
  font-size: 12px;
  padding: 4px 0;
}

.nav-item img {
  width: 24px;
  height: 24px;
  margin-bottom: 2px;
}

.nav-item.active {
  color: #409EFF;
}

/* 当在 CDK 页面时，移除底部 padding */
body:has(.cdk-page) {
  padding-bottom: 0;
}
</style>